.loopx( @count )when( @count > 0 ){
    [sizew="@{count}"]  {
        width: ( 100% * ((@count/24.0))   );
    }
    .loopx((@count - 1));
}
.loopx(24);

.looppt( @count )when( @count > 0 ){
    .p-t-@{count} {
        padding-top: (0px + @count) !important;
    }
    .m-t-@{count} {
        margin-top: (0px + @count) !important;
    }
    .looppt((@count - 5));
}
.looppt(55);
.loop-p-r( @count )when( @count > 0 ){
    .p-r-@{count} {
        padding-right: (0px + @count) !important;
    }
    .m-r-@{count} {
        margin-right: (0px + @count) !important;
    }
    .loop-p-r((@count - 5));
}
.loop-p-r(55);

.loop-p-b( @count )when( @count > 0 ){
    .p-b-@{count} {
        padding-bottom: (0px + @count) !important;
    }
    .m-b-@{count} {
        margin-bottom: (0px + @count) !important;
    }
    .loop-p-b((@count - 5));
}
.loop-p-b(55);

.loop-p-l( @count )when( @count > 0 ){
    .p-l-@{count} {
        padding-left: (0px + @count) !important;
    }
    .m-l-@{count} {
        margin-left: (0px + @count) !important;
    }
    .loop-p-l((@count - 5));
}
.loop-p-l(55);

.loop-m-t( @count )when( @count > 0 ){
    .m-t-@{count} {
        margin-top: (0px + @count) !important;
    }
    .loop-m-t((@count - 5));
}
.loop-m-t(55);
.loop-m-r( @count )when( @count > 0 ){
    .m-r-@{count} {
        margin-right: (0px + @count) !important;
    }
    .loop-m-r((@count - 5));
}
.loop-m-r(55);

.loop-m-b( @count )when( @count > 0 ){
    .m-b-@{count} {
        margin-bottom: (0px + @count) !important;
    }
    .loop-m-b((@count - 5));
}
.loop-m-b(55);

.loop-m-l( @count )when( @count > 0 ){
    .m-l-@{count} {
        margin-left: (0px + @count) !important;
    }
    .loop-m-l((@count - 5));
}
.loop-m-l(55);

.crow {
    position: relative;
    overflow: hidden;
    >div{
        float: left;
    }
}
.text-center{
    text-align: center;
}
.text-left{
    text-align: left !important;
}
.text-right{
    text-align: right;
}
.f-l{
    float: left;
}
.f-r{
    float: right;
}
.pointer{
    cursor: pointer;
}
.width-xs{
    width: 140px;
}
.width-md{
    width: 240px;
}
.content{
    .select-basic-data.line:after{
        top: 6px !important;
    }
    .ivu-input{
        font-size: 14px;
    }
    .content-header{
        height: 36px;
        line-height: 32px;
        font-size: @font-size-base;
        margin-bottom: 8px;
        overflow: hidden;
        .hearder-state{
            height: 32px;
            line-height: 32px;
            li{
                padding: 0 4px;
                display: inline-block;
                .round{
                    top: 2px;
                }
            }
            a {
                padding: 2px 5px;
                margin-right: 5px;
            }
            .selected {
                border: 1px solid @link-color;
                color: @link-color;
            }
        }
        .right-btn{
            position: relative;
            top: 3px;
        }
    }
    .round{
        height: 16px;
        width: 16px;
        display: inline-block;
        border-radius: 16px;
        position: relative;
    }
    .ivu-page{
        float: right;
        padding-top: 16px;
    }
}

.vertical-align-middle {
    vertical-align: middle;
}
//右置
.pull-right {
    float: right;
}
//左置
.pull-left {
    float: left !important;
}

.right-border {
    border-right: 1px solid @border-color-base;
}

.border {
    border: 1px solid @border-color-base;
}

.color-light-gray {
    color: #a3a3a3;
    opacity: 0.85;
}

.color-warning {
    color: @warning-color !important;
}

.color-success {
    color: @success-color !important;
}

.ivu-modal-mask {
    background-color: rgba(55, 55, 55, 0.5) !important;
}

a {
    color: #3a3a3a;
}
/**
*   详情页基础样式
*/
.detail {
    position: relative;
    min-height: 80vh;

    .content-header {
        margin-bottom: 10px;
    }

    .ivu-tabs-bar { //tab页标签
        background:#e4e8f2;
        border-bottom: 1px solid #e4e8f2;
        .ivu-tabs-nav .ivu-tabs-tab-active {
            color: @text-color;
        }
    }
    //详情头部
    .detail-header {
        padding: 18px 100px 10px 100px;
        background:#e4e8f2;
        position: relative;

        //左侧图标+文本
        .operation-text {
            //图标
            .bg-icon {
                left: 20px;
                top: 15px;
                width: 64px;
                height: 64px;
                line-height: 64px;
                position: absolute;
                border-radius: 100%;
                text-align: center;
                font-size: @font-size-huge;
                color:#ffffff;
            }
            //标题
            h3 {
                font-size: @font-size-large;
            }
            //副标题
            p {
                margin-top: 8px;
                span {
                    color: @subsidiary-color;
                    margin-right: 16px;
                }
            }
        }
        //右侧操作区域
        .operation-area {
            position: absolute;
            right: 20px;
            top: 10px;
            a { //图标 请使用a标签
                display:inline-block;
                width: 28px;
                height: 28px;
                border-radius: 100%;
                background: #ffffff;
                font-size: @font-size-big;
                padding-left: 6px;
                padding-top: 2px;
                margin-left: 8px;
            }
            .ivu-poptip-body {
                padding: 8px 0;
            }
        }
    }

    //组件详情头部
    .component-detail-header {
        padding: 18px 100px 10px 20px;
        background:#e4e8f2;
        position: relative;

        //文本
        .operation-text {
            //标题
            h3 {
                font-size: @font-size-large;
                display:inline-block;
            }
            .operation-isUsed-div{
                background:#508ae4;
                border-radius:10px;
                width:59px;height:20px;
                display:inline-block;
                .operation-isUsed-span{
                    font-size:14px;
                    color:#ffffff;
                    text-align:left;
                    margin-left: 14px;
                }
            }
            //副标题
            p {
                margin-top: 8px;
                span {
                    color: @subsidiary-color;
                    margin-right: 16px;
                }
            }
        }
        //右侧操作区域
        .operation-area {
            position: absolute;
            right: 20px;
            top: 10px;
            a { //图标 请使用a标签
                display:inline-block;
                width: 28px;
                height: 28px;
                border-radius: 100%;
                background: #ffffff;
                font-size: @font-size-big;
                padding-left: 6px;
                padding-top: 2px;
                margin-left: 8px;
            }
        }
    }

}

//搜索输入框
.search-input {
    width: 120px;
    float: left;
}

.table-column-btn {
    a {
        font-size: @font-size-base;
        margin-left: 16px;
    }
}

.detail-info {
    color: #808695;
}
.poptip-content {

    li {
        cursor: pointer;
        padding: 10px 25px;
    }
    li:hover {
        background: #f7f7f7;
        color: rgba(62, 169, 245, 1);
    }
}
.component-icon-div {
    display:inline-block;
    position: absolute;
    bottom: 0px;
    background:#6cc8d7;
    width:48px;
    height:48px;
    border-radius:100%;
    .component-icon-span {
        font-size: 28px;
        position: absolute;
        left: 10px;
        top: 10px;
        color: #fff;
    }
}
// 按钮组样式
.close-group{
    .ivu-radio-wrapper{
        margin-right: 0;
    }
    .ivu-radio-wrapper-checked:first-child ,.ivu-radio-wrapper-checked ,.ivu-radio-wrapper-checked:hover{
        border-color: #0b1842;
        box-shadow: -1px 0 0 0 #0b1842;
    }
    .ivu-radio-wrapper-checked ,.ivu-radio-wrapper-checked::before{
        background: #0b1842;
        box-shadow: -1px 0 0 0 #0b1842;
    }
    .ivu-radio-focus::after ，.ivu-radio-focus::before{
        opacity: 0;
    }
}

//调度  卡片列表形式
.list-card:hover{
    .ivu-page{
        .ivu-page-prev ,.ivu-page-next{
            display: inline;
        }
    }
}
.list-card{
    overflow: hidden;
    min-height: 500px;
    position: relative;
    .ivu-page{
        .ivu-page-simple-pager ,.ivu-page-item{
            display: none;
        }
        .ivu-page-prev{
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateX(-50%);
        }
        .ivu-page-next{
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateX(-50%);
        }
        .ivu-page-prev ,.ivu-page-next{
            display: none;
        }
    }
    .pages{
        font-size: 22px;
        position: absolute;
        cursor: pointer;
        color:#777777;
        display: none;
    }
    .pages.left{
        left: 10px;
        top: 50%;
        transform: translateX(-50%);
    }
    .pages.right{
        right: 10px;
        top: 50%;
        transform: translateX(-50%);
    }
    .stop{
        .start{
            background:#ed8e8c;
        }
        .operation{
            background: #ed8e8c;
            color: #fff;
        }
        .state{
            color: #ed8e8c;
        }
    }
    .card-item{
        background:#ffffff;
        width:240px;
        height:120px;
        float: left;
        margin: 30px 30px 15px 15px;
    }
    .start{
        background:#6cc8d7;
    }

    .title{
        overflow: hidden;
        border-bottom:1px solid #d8d8d8;
    }
    .cardicon{
        width:40px;
        height:40px;
        border-radius:100px;
        position: relative;
        float: left;
        margin: 15px 0 15px 10px;
        i{
            font-size: 22px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    }
    .card-info{
        margin: 15px 0 0 10px;
        .info-desc{
            color: #a3a3a3;
        }
    }
    .operation{
        height: 48px;
        line-height: 48px;
        color: #777777;
        font-size: 16px;
        .crow >div{
            cursor: pointer;
            text-align: center;
        }
    }
}

.main-wrapper {
    .left-sider {
        background: #0b1842;
    }
    .header {
        background: #ffffff;
        padding: 0;
        height: 56px;
        line-height: 28px;
        box-shadow: 0 4px 0 #f6f6f6;
    }
    .content {
        padding: 14px 24px;
    }
}

.alarm-dot {
    height: 6px;
    width: 6px;
    margin-bottom: 3px;
    display: inline-block;
    border-radius: 100%;
    position: relative;
    background: #e0516f !important;
}

.spin-icon-load {
    animation: ani-spin 1s linear infinite;
}
@keyframes ani-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

.fix-scrollbar::-webkit-scrollbar {/*滚动条整体样式*/
    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
}
.fix-scrollbar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    background-color: #979797;
}
.fix-scrollbar::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f5f7f9;
}

.operation-poptip {
    .ivu-poptip-body {
        padding: 8px 0;
    }
}

.selected-item {
    color: @link-color !important;
}

.main-content {
    max-height: calc(~'100vh - 138px');
    overflow: auto;
}
.main-content-with-page {
    max-height: calc(~'100vh - 180px');
    overflow: auto;
}
.tab-content {
    max-height: calc(~'100vh - 272px');
    overflow: auto;
}

.ivu-spin-fix{
    z-index: 9999;
}

&.animate {
    &.dropDown{
        -webkit-animation: dropDownFadeInDown 600ms cubic-bezier(.23,1,.32,1);
    animation: dropDownFadeInDown 600ms cubic-bezier(.23,1,.32,1);
    }
    &.dropUp {
        -webkit-animation: dropDownFadeInUp 600ms cubic-bezier(.23,1,.32,1);
        animation: dropDownFadeInUp 600ms cubic-bezier(.23,1,.32,1);
    }
}


@keyframes dropDownFadeInDown {
    from{ opacity: 0;transform: translate3d(0, -20px, 0); }
    to{ opacity: 1;transform: translate3d(0, 0, 0); }
}
@keyframes dropDownFadeInUp {
    from{ opacity: 0;transform: translate3d(0, 20px, 0); }
    to{ opacity: 1;transform: translate3d(0, 0, 0); }
}



@keyframes bounceInDown {
    from,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
    }

    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
    }

    75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }

    90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  .bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
  }
  .bounceInDown-enter-active {
    animation: bounceInDown .5s;
  }
  .bounceInDown-leave-active {
    animation: bounceInDown .5s reverse;
  }
  .ivu-collapse-header {
    word-wrap:normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .zl-panel-bg {
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
.panel-fullmodal .grable-layout.zl-show-bg .show-all .show-content {
  background: transparent;
}
.grable-layout .title-area.zl-show-bg {
  background: transparent !important;
  color: #fff !important;
}
.grable-layout .zl-show-bg {
  background: transparent !important;
}
.main-wrapper.is-fullscreen {
  > .ivu-layout-sider,
  > .ivu-layout > .ivu-layout-header {
    display: none;
  }
}
.fr {
  float: right;
}
.flex {
  display: flex;
  .flex-1 {
    flex: 1;
    min-width: 0;
  }
}

// ui编辑器
.zl-editor-setting-tab {
  height: 100%;
}
